import React from 'react';
import {Link} from 'dva/router';
import {Table, Badge, Divider, Popconfirm, Button, Modal, Icon} from 'antd';
import styles from './ProjectCatTable.less';

export default class ProjectCatTable extends React.PureComponent {

  // constructor(props) {
  //   super(props);
  //
  //   this.data = arrayToTree(props.list, 'id', 'pid');
  //   console.log(this.data);
  // }

  cleanSelectedKeys = () => {
    this.props.dispatch({
      type: 'projectCat/cleanSelectedKeys',
    });
  };

  showBatchDeleteConfirm = () => {
    const {dispatch, selectedRowKeys} = this.props;

    Modal.confirm({
      title: `确定删除已选中 ${selectedRowKeys.length} 项?`,
      content: 'Some descriptions',
      okText: 'Yes',
      okType: 'danger',
      cancelText: 'No',
      onOk() {
        dispatch({
          type: 'projectCat/removeByIds',
        });
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  };

  remove = (id) => {
    this.props.dispatch({
      type: 'projectCat/remove',
      payload: id,
    });
  };

  render() {
    const {dispatch, loading, list, selectedRowKeys, onTableChange} = this.props;

    const columns = [{
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
    }];

    const tableProps = {
      loading: loading.effects['projectCat/getAll'],
      columns,
      dataSource: list,
      rowKey: record => record.id,
      rowSelection: {
        selectedRowKeys,
        onChange: keys => {
          dispatch({
            type: 'projectCat/bUpdateState',
            payload: {
              selectedRowKeys: keys,
            },
          });
        },
        getCheckboxProps: record => ({
          disabled: record.disabled,
        }),
      },
      onChange: onTableChange,
      defaultExpandAllRows: true,
    };

    return (
      <div className={styles.projectTable}>
        <div className={styles.toolBar}>
          <Link to={`project_cat/new`}><Button type="primary" icon="plus" className={styles.MR8}>新建</Button></Link>
          {selectedRowKeys.length > 0 &&
          <span className={styles.pullRight}>
							<span className={styles.MR8}>{`已选 ${selectedRowKeys.length} 项 `}</span>
							<Button type="danger" className={styles.MR8} onClick={this.showBatchDeleteConfirm}>批量删除</Button>
							<Button onClick={this.cleanSelectedKeys}>取消选择</Button>
						</span>
          }
        </div>
        <Table {...tableProps} />
      </div>
    );
  }
}
